<template>
  <div>
    <h1>HOME</h1>
    <div>
      <!-- 
      如果直接使用router-link组件进行导航，被称作为声明式路由导航
      router-link声明式导航底层仍然使用的是编程式路由导航，已经默认帮我们解决了重复你导航的bug
        - to：就是push方法接收的第一个参数location
        - replace：替换历史记录
        - tag：想要 <router-link> 渲染成某种标签，例如 <li>，于是我们使用tag prop 类指定何种标签，同样它还是会监听点击，触发导航
        - active-class：设置链接激活时使用的css类名
     -->
      <router-link to="/home/news" tag="button" active-class="active"
        >新闻</router-link
      >
      <router-link
        :to="{
          path: '/home/music',
        }"
        active-class="active"
        tag="button"
        >音乐</router-link
      ><router-link
        :to="{
          name: 'Game',
        }"
        active-class="active"
        tag="button"
        >游戏</router-link
      >
    </div>
    <div>
      <router-link to="/home/news" replace>新闻Replace</router-link>
      <router-link
        :to="{
          path: '/home/music',
        }"
        replace
        >音乐Replace</router-link
      >
      <router-link
        :to="{
          name: 'Game',
        }"
        replace
        >游戏Replace</router-link
      >
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

<style>
button {
  font-size: 18px;
  width: 100px;
  line-height: 30px;
  margin-left: 20px;
  border: none;
}
button:focus {
  border: none;
}
.active {
  color: white;
  font-weight: bold;
  background: orange;
}
</style>
